<template>
    <el-breadcrumb class="vea-breadcrumb">
        <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>公告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <vea-button-components/>
    <el-table class="vea-table" border stripe height="70vh" v-loading="load" :data="data" size="small">
        <el-table-column type="index" width="50" align="center"/>
        <el-table-column label="标题" prop="name"/>
        <el-table-column label="发布人" prop="author"/>
        <el-table-column label="发布时间" prop="start_time"/>
        <el-table-column label="有效时间" prop="end_time"/>
        <el-table-column label="状态" width="100" align="center">
            <template #default="scoped">
                <el-tag size="small" :type="noticeState[scoped.row.state].type">
                    {{ noticeState[scoped.row.state].text }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
            <template #default="scoped">
                <vea-button-components type="option" :row="scoped" :delete-text="`是否删除公告${scoped.row.name}`"
                                       @delete="delNotice"/>
            </template>
        </el-table-column>
    </el-table>
    <vea-page-components @get-data="getData" :page="page" :total="total"/>
</template>

<script setup>
import VeaButtonComponents from "@/components/veaMenuComponents/VeaButtonComponents.vue";
import {onMounted, ref} from "vue";
import VeaPageComponents from "@/components/veaMenuComponents/VeaPageComponents.vue";
import {$ajax, apiUrl} from "@/utils/request";
import {noticeState} from "@/utils/constant";
import {ElMessage} from "element-plus";

const load = ref(false)
const data = ref([])
const page = ref(1)
const total = ref(1)

const getData = (_page) => {
    page.value = _page
    load.value = true
    $ajax.get(`${apiUrl}/notice/lst`, {params: {page: _page}}).then(({data: {result}}) => {
        total.value = result.total
        load.value = false
        data.value = result.data
    }).catch(() => load.value = false)
}
const delNotice = (value, index) => {
    load.value = true
    $ajax.post(`${apiUrl}/notice/delete`, {id: value.id}).then(() => {
        ElMessage.success({
            message: '删除成功！',
            duration: 3000,
            onClose: () => {
                load.value = false;
                data.value = data.value.filter((its, inx) => inx !== index)
            }
        })
    }).catch(() => load.value = false)
}

onMounted(() => {
    getData(1)
})
</script>

<style scoped>

</style>
